<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>articlelist</title>

		<link rel="stylesheet" type="text/css" href="style/css.css">
		<link rel="stylesheet" type="text/css" href="style/product_list.css">
		

	<script src="js/js.js"></script>

	</head>

	<body>
		<div class="top">
			<div class="top-1">
				<ul>
					<li>
						<a href="#">注册</a>
					</li>
					<li>
						<a href="#">登录</a>
					</li>
					<li>
						<a href="#">帮助</a>
					</li>
				</ul>
			</div>
			<div style="clear: both;"></div>
			<!--清除浮动-->
			<img src="images/logo.jpg" />
			<div class="top-2">
				<ul>
					<li>关于我们</li>
					<li>产品展示</li>
					<li>新闻中心</li>
					<li>人才招聘</li>
					<li>客户留言</li>
				</ul>
			</div>
			<div style="clear: both;"></div>
			<!--清除浮动-->
			<div class="top-3">
				<ul>
					<li>CEO致词</li>
					<li>公司历史</li>
					<li>企业文化</li>
					<li>组织结构</li>
					<li>合作伙伴</li>
				</ul>
			</div>
		</div>

		<div style="clear: both;"></div>
		<!--清除浮动-->

		<div class="guanggao">
			<img src="images/Information_ganggao.jpg" />
		</div>
		
		<div style="clear: both;"></div>
		<!--清除浮动-->
		<img src="images/sheng.png" style="float: left;left: 250px;position: absolute;top: 293px;" />
		<div class="zhong">
			<div class="vip">
				<a>PRODUCT</a>
				<p>产品展示</p>
				<hr width="165px" size="5" style="margin: 0 auto; margin-top: 5px;background-color: #ccc;border: none;" />
				<ul>
					<li><img src="images/Information_xinxi.jpg" />
						<a style="color: #214C8F;">手机设备</a>
					</li>
					<hr width="165px" size="2" style="margin: 0 auto; margin-top: 5px;" />
					<li><img src="images/Information_xinxi.jpg" />
						<a>电脑设备</a>
					</li>
					<hr width="165px" size="2" style="margin: 0 auto; margin-top: 5px;" />
					<li><img src="images/Information_xinxi.jpg" />
						<a>摄像设备</a>
					</li>
					<hr width="165px" size="2" style="margin: 0 auto; margin-top: 5px;" />
					<li><img src="images/Information_xinxi.jpg" />
						<a>监控设备</a>
					</li>
					
				</ul>
			</div>

			<div class="zilian">
				<div class="z-top" style="height: 28px;">
					<ul class="left">
						<li style="float: left;">&nbsp; 产品介绍</li>
						<samp style="font-size: 12px;color: #818181;">&nbsp; 梦想的世界</samp>
					</ul>
					<ul class="r">
						<li>主页&nbsp;></li>
						<li>产品介绍&nbsp;></li>
						<li>产品展示</li>
					</ul>
				</div>
				
					<div class="zhongbian">
						<ul style="margin-left: 62px;">
							<li ><a ><img src="images/Product_detail_zxi1.jpg"  alt=""/></a> <p>ASA SG1209</p> </li>
							<li><a><img src="images/Product_detail_zxi2.jpg" alt="" /></a> <p>ASA SG1209</p> </li>
							<li><a><img src="images/Product_detail_zxi3.jpg" alt="" /></a> <p>ASA SG1209</p> </li>
							<li><a><img src="images/Product_detail_zxi4.jpg"  alt=""/></a><p>ASA SG1209</p>  </li>
						</ul>
							<ul style="margin-left: 62px;">
							<li><a><img src="images/Product_detail_zxi1.jpg" alt="" />	</a><p>ASA SG1209</p> </li>
							<li><a><img src="images/Product_detail_zxi2.jpg"  alt=""/></a> <p>ASA SG1209</p> </li>
							<li><a><img src="images/Product_detail_zxi3.jpg"  alt=""/> </a><p>ASA SG1209</p> </li>
							<li><a><img src="images/Product_detail_zxi4.jpg"  alt=""/></a><p>ASA SG1209</p>  </li>
						</ul>
							<ul style="margin-left: 62px;">
							<li><a><img src="images/Product_detail_zxi1.jpg" alt="" />	</a><p>ASA SG1209</p> </li>
							<li><a><img src="images/Product_detail_zxi2.jpg"  alt=""/></a> <p>ASA SG1209</p> </li>
							<li><a><img src="images/Product_detail_zxi3.jpg" alt="" /> </a><p>ASA SG1209</p> </li>
							<li><a><img src="images/Product_detail_zxi4.jpg" alt="" /></a><p>ASA SG1209</p>  </li>
						</ul>
							<ul style="margin-left: 62px;">
							<li><a><img src="images/Product_detail_zxi1.jpg"  alt=""/></a>	<p>ASA SG1209</p> </li>
							<li><a><img src="images/Product_detail_zxi2.jpg" alt="" /></a> <p>ASA SG1209</p> </li>
							<li><a><img src="images/Product_detail_zxi3.jpg" alt="" /></a> <p>ASA SG1209</p> </li>
							<li><a><img src="images/Product_detail_zxi4.jpg"  alt=""/></a><p>ASA SG1209</p>  </li>
						</ul>
					</div>			
					
	
	<style>
		/*.zhongbian a｛
					width:100px;
		｝*/
 	samp.imageMask{
	background:white; 
	filter:alpha(opacity=0);
	-moz-opacity:0;
	-khtml-opacity: 0;
	z-index: 1;
	opacity: 0;	
}
samp.imageOver{
	background:url(images/zoom.gif) no-repeat 50% 50%;	
	filter:alpha(opacity=60);
	-moz-opacity:0.6;
	-khtml-opacity: 0.6;
	z-index: 2;
	opacity: 0.6;	
	margin-top: 50px;
	/*margin-left: 50px;*/
}
	</style>
	
	<script>
		/*滑过图片出现放大镜效果*/
$(function(){
       $(".zhongbian ul li").each(function(index){
			  var position = $(this).position();
			  var li_left = position.left;
			  var li_top = position.top;
			  var img_width = $(this).find("img").width();
			  var img_height = $(this).find("img").height();
              var spanHtml = '<samp style="position: absolute; top: '+li_top+'px; left: '+li_left+'px; width:'+img_width+'px; height: '+img_height+'px; cursor: pointer;" class="imageMask"></samp>';
			  $(spanHtml).hover(function(){
						$(this).addClass("imageOver");
				    },function(){
						$(this).removeClass("imageOver");
				 }).appendTo( $(this).find("a") );
		 })
})
	</script>
	<div class="xia1">
					<ul>
						<li><<</li>
						<li>1</li>
						<li>2</li>
						<li>3</li>
						<li>4</li>
						<li>5</li>
						<li>>></li>
					</ul>
				</div>
	
	</div>
	
				<div style="clear: both;"></div>
		<!--清除浮动-->
				
			<div class="wei">
				<p>地址：广东省广州市海珠区新港西路231号3栋4层 联系人：乐 乐 移动电话：13588888888 固定电话：020-1234567 传 真：020-1234567 Copyright @ 2014 文豆网络科技有限公司 版权所有 粤ICP备0000000号</p>
				<select style="float: right;">
					<option>友情链接</option>
					<option>1</option>
					<option>2</option>

				</select>
			</div>

		

	</body>

</html>